<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>员工管理</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入element-UI样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../plugins/element-ui/icon/iconfont.css" />
    <!-- 引入CSS -->
    <link rel="stylesheet" href="../css/employee.css" />
    <link rel="stylesheet" href="../css/all.css" />
</head>
<body>
    <div class="container" id="member-app">
        <!-- 顶部 -->
        <div class="tableBar">
            <!-- 搜索框 -->
            <!-- @keyup.enter.native:回车按钮动作 -->
            <el-input class="tableBar-input" v-model="input" placeholder="请输入员工姓名" style="width: 250px" clearable @keyup.enter.native="init()">
                <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="init()"></i>
            </el-input>
            <!-- 添加按钮 -->
            <el-button class="tableBar-button" type="primary" @click="showAdd()">
                + 添加员工
            </el-button>
            <div style="clear: both;"></div>
            <!-- 添加窗 -->
            <el-dialog title="添加员工" :visible.sync="dialogAddFormVisible" :fullscreen="true">
                <!-- label-position:表单域标签的位置,label-width:表单域标签的宽度 -->
                <el-form ref="elAdd":model="elAdd" :rules="rules" label-position="right" label-width="100px" :clearable="true">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="姓名" prop="name"><el-input v-model="elAdd.name"/></el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="性别" prop="sex">
                                <el-radio-group v-model="elAdd.sex">
                                    <el-radio :label="1">男</el-radio>
                                    <el-radio :label="0" >女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="年龄" prop="age"><el-input v-model="elAdd.age"/></el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="电话号码" prop="phone"><el-input v-model="elAdd.phone"/></el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="身份证号" prop="idNumber"><el-input v-model="elAdd.idNumber"/></el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogAddFormVisible= false">取消</el-button>
                    <el-button type="primary" @click="handleAdd()">确定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" stripe class="tableBox" height="450" :header-cell-style="{background:'#d3dce6',color:'#606266'}">
            <el-table-column prop="name" label="员工姓名"></el-table-column>
            <el-table-column prop="sex" label="性别">
                <template slot-scope="scope">
                    {{ String(scope.row.sex) === '1' ? '男' : '女' }}
                </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <el-table-column prop="idNumber" label="身份证号"></el-table-column>
            <el-table-column label="账号状态">
                <template slot-scope="scope">
                    {{ String(scope.row.status) === '0' ? '已禁用' : '正常' }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" class="blueBug"
                               @click="showUpdate(scope.row.id)">
                        编辑
                    </el-button>
                    <el-button type="text" size="small" class="delBut non"
                               @click="statusHandle(scope.row)">
                        {{ String(scope.row.status) === '1' ? '禁用' : '启用' }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 修改窗 -->
        <el-dialog title="修改员工信息" :visible.sync="dialogUpdateVisible" :fullscreen="true">
            <!-- label-position:表单域标签的位置,label-width:表单域标签的宽度 -->
            <el-form ref="elUpdate":model="elUpdate" :rules="rules" label-position="right" label-width="100px" :clearable="true">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="name"><el-input v-model="elUpdate.name"/></el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="elUpdate.sex">
                                <el-radio :label="1">男</el-radio>
                                <el-radio :label="0" >女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年龄" prop="age"><el-input v-model="elUpdate.age"/></el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话号码" prop="phone"><el-input v-model="elUpdate.phone"/></el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身份证号" prop="idNumber"><el-input v-model="elUpdate.idNumber"/></el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdateVisible= false">取消</el-button>
                <el-button type="primary" @click="handleUpdate()">确定</el-button>
            </div>
        </el-dialog>
        <!-- 底部 -->
        <!-- size-change:每页显示的条目数改变时会触发，current-change:当前页改变时会触发 -->
        <!-- page-sizes:每页显示个数选择器的选项设置 -->
        <el-pagination class="pageList"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       :current-page.sync="currentPage"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</body>
    <!-- 引入VUE组件 -->
    <script src="../plugins/vue/vue.js"></script>
    <!-- 引入element-UI组件库 -->
    <script src="../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../plugins/axios/axios.min.js"></script>
    <!-- 引入JS -->
    <script src="../js/employee.js"></script>
</html>